<template>
  <div class="hud" ref="hud">
    <div class="hud-border top">
      <div class="hud-angle left top"></div>
      <div class="hud-angle right top"></div>
      <div class="hud-border shadow top">
        <div class="hud-angle shadow left top"></div>
        <div class="hud-angle shadow right top"></div>
      </div>
    </div>
    <div class="hud-body-main" v-show="showBody">
      <span class="hud-num">{{ numFormat }}</span>
      <span class="hud-separator">&#47;</span>
      <span class="hud-total">{{ totalFormat }}</span>
      <span class="hud-body-padding"></span>
      <span class="hud-title-content">
        <span class="title-input-container"
          ><input
            class="title-input"
            ref="titleInput"
            @input="inputHandle"
            :value="localTitleContent"
        /></span>
      </span>
    </div>
    <div class="hud-body-sub" v-show="showBody" ref="floatTag">
      <span class="hud-body-sub-left"
        ><div class="info">
          <div class="info-id">{{ localInfoId }}</div>
        </div>
        <div class="opr-button" @click="clickOprButton">
          <div class="opr-button-icon1"></div>
          <div class="opr-button-icon2"></div></div></span
      ><span class="hud-body-sub-right"></span>
    </div>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  name: 'HudTitle',
  components: {},
  props: {
    infoId: String,
    num: Number,
    total: Number,
    titleContent: String
  },
  data () {
    return {
      spreadAnimation: null,
      showBody: false,
      localNum: 0,
      localTotal: 0,
      localInfoId: '',
      localTitleContent: ''
    }
  },
  watch: {
    num (newVal, oldVal) {
      this.numAnimation(newVal)
    },
    total (newVal, oldVal) {
      this.totalNumAnimation(newVal)
    },
    infoId (newVal, oldVal) {
      this.infoIdSpreadAnimation(newVal)
      this.floatTagSpreadAnimation()
    }
    // titleContent (newVal, oldVal) {
    //   this.titleTextContentSpreadAnimation(newVal)
    // }
  },
  computed: {
    numFormat () {
      return this.localNum
        .toFixed(0)
        .toString()
        .padStart(2, '0')
    },
    totalFormat () {
      return this.localTotal
        .toFixed(0)
        .toString()
        .padStart(2, '0')
    }
  },
  mounted () {
    this.openingAnimation()
  },
  destroyed () {},
  methods: {
    inputHandle (event) {
      this.$emit('input', event.target.value)
    },
    clickOprButton () {
      this.$emit('clickOprButton')
    },
    // 开场动画
    openingAnimation () {
      let num = this.num
      let total = this.total
      if (!this.num || !this.total) {
        this.localNum = 99
        this.localTotal = 99
        num = 0
        total = 0
      }
      this.showBody = true
      this.numAnimation(num)
      this.totalNumAnimation(total)
      this.infoIdSpreadAnimation(this.infoId || 'undefine')
      this.titleTextContentSpreadAnimation(this.titleContent || '')
      if (!this.spreadAnimation) {
        this.spreadAnimation = gsap
          .timeline()
          .add(this.titleSpreadAnimation())
          .add(this.floatTagSpreadAnimation(), '<')
      }
      this.spreadAnimation.play()
    },
    // 退出动画
    escapeAnimation () {
      if (this.spreadAnimation) {
        return gsap
          .timeline()
          .add(this.spreadAnimation.reverse())
          .add(this.numAnimation(0), '<')
          .add(this.totalNumAnimation(0), '<')
      }
      return null
    },
    numAnimation (newNum) {
      return gsap.to(this.$data, {
        duration: 0.4,
        localNum: newNum
      })
    },
    totalNumAnimation (newTotal) {
      return gsap.to(this.$data, {
        duration: 0.4,
        localTotal: newTotal
      })
    },
    titleSpreadAnimation () {
      let el = this.$refs.titleInput
      return gsap.from(el, {
        duration: 0.5,
        width: 0,
        onComplete () {
          el.style = null
        }
      })
    },
    titleTextContentSpreadAnimation (str) {
      this.strSpreadAnimation(str, 'localTitleContent', false, 11, 0.03, () => {
        this.localTitleContent = str
      })
    },
    floatTagSpreadAnimation () {
      let el = this.$refs.floatTag
      return gsap.from(el, {
        duration: 0.5,
        height: 0
      })
    },
    infoIdSpreadAnimation (str) {
      this.strSpreadAnimation(str, 'localInfoId', true)
    },
    strSpreadAnimation (
      str,
      dataName,
      reverse,
      repeatLength,
      repeatDelay,
      onCompleteFunc
    ) {
      this[dataName] = ''
      if (str.length === 0) {
        return
      }
      let self = this
      let maskStr = reverse
        ? str.charAt(str.length - 1) + str
        : str.replace(/^./, '') + str.charAt(0)
      let repeatLen = repeatLength || str.length
      let i = reverse ? str.length - 1 : 0
      let step = true
      let strBackup
      gsap.to(this.$data, {
        repeat: (repeatLen + 1) * 2,
        duration: repeatDelay || 0.04,
        onRepeat () {
          if (step) {
            strBackup = self[dataName]
            self[dataName] = reverse
              ? maskStr.charAt(i) + self[dataName]
              : self[dataName] + maskStr.charAt(i)
          } else {
            self[dataName] = reverse
              ? str.charAt(i--) + strBackup
              : strBackup + str.charAt(i++)
          }
          step = !step
        },
        onComplete: onCompleteFunc
      })
    }
  }
}
</script>

<style scoped>
.hud {
  width: 100%;
  height: 80px;
}
.hud-body-sub {
  position: absolute;
  transform: translate(-10px, -50%);
  right: 100%;
  top: 100%;
  width: 80px;
  height: 50px;
}
.hud-body-sub-left {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 100%;
}
.hud-body-sub-left::before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}
.info {
  position: absolute;
  top: 0;
  right: 5px;
  height: 50%;
  width: 150%;
  line-height: 1;
  /* overflow: hidden; */
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
}
.info-id {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: right;
  height: 1em;
  width: 100%;
  color: #cfcfcf;
}
.opr-button {
  cursor: pointer;
  position: absolute;
  right: 5px;
  bottom: 0;
  height: 50%;
  width: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.02);
}
.opr-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.opr-button::before {
  content: '';
  padding-top: 100%;
  display: block;
}
.opr-button-icon1 {
  position: absolute;
  right: 1.5px;
  bottom: 1.5px;
  width: 15.5px;
  height: 15.5px;
  border-radius: 2.5px;
  background-image: linear-gradient(
    to bottom left,
    transparent calc(50% - 2px),
    white calc(50% - 2px),
    white calc(50% + 2px),
    transparent calc(50% + 2px)
  );
}
.opr-button-icon1::before {
  content: '';
  position: absolute;
  right: 71%;
  bottom: 70%;
  width: 11px;
  height: 11px;
  border-radius: 7px;
  background-color: white;
  clip-path: path('M 3.5,0 V 6 H 7.5 V 0 H 12 V 12 H 0 V 0 Z');
  transform: rotate(-45deg);
}
.opr-button-icon2 {
  position: absolute;
  right: 1.5px;
  top: 1.5px;
  width: 16px;
  height: 16px;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    white calc(50% - 1px),
    white calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.opr-button-icon2::before {
  content: '';
  position: absolute;
  right: 90%;
  top: 80%;
  width: 5px;
  height: 9px;
  background-color: white;
  transform: rotate(45deg);
}
.hud-body-sub-right {
  display: inline-block;
  width: 30px;
  height: 100%;
}
.hud-body-sub-right::before {
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(
    to bottom left,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.1) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.hud-body-sub-right::after {
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    rgba(0, 0, 0, 0.1) calc(50% - 01px),
    rgba(0, 0, 0, 0.1) 50%,
    transparent 50%
  );
}
.hud-body-main {
  display: flex;
  align-items: baseline;
  height: 2.5em;
  margin: 7px 20px 0px 30px;
}
.hud-num {
  display: inline-block;
  font-size: 2.5em;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}
.hud-separator {
  display: inline-block;
  font-size: 2.5em;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}
.hud-total {
  display: inline-block;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}
.hud-body-padding {
  display: inline-block;
  width: 10px;
}
.hud-title-content {
  display: inline-block;
  position: relative;
  flex: 1;
  height: 100%;
  align-self: flex-end;
}
.title-input-container {
  position: absolute;
  display: inline-flex;
  align-items: flex-end;
  bottom: 0;
  height: 1.5em;
}
.title-input-container::before {
  content: '';
  display: inline-block;
  height: 100%;
  padding: 0px 0px 0px 2px;
  margin: 0px 2px 0px 0px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-right: none;
}
.title-input {
  flex: 1;
  border-radius: 0;
  margin: 0;
  padding: 0px 10px 2px 10px;
  border: 0;
  outline: none;
  width: 100%;
  height: 100%;
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.03);
}
.title-input-container::after {
  content: '';
  display: inline-block;
  height: 100%;
  padding: 0px 0px 0px 2px;
  margin: 0px 0px 0px 2px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-left: none;
}
.hud-border {
  position: relative;
  height: 0px;
  width: 100%;
}
.hud-angle {
  position: absolute;
  display: inline-block;
  border: 3px solid #b2b2b2;
  width: 10px;
  height: 17px;
}
.hud-angle.left.top {
  border-right-width: 0px;
  border-left-width: 0px;
  border-bottom-width: 0px;
}
.hud-angle.right.top {
  right: 0;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
}
.hud-angle.left.bottom {
  bottom: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-top-width: 0px;
}
.hud-angle.right.bottom {
  right: 0;
  bottom: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
}
.shadow {
  z-index: -1;
  position: absolute;
  border-color: rgba(0, 0, 0, 0.06);
}
.hud-border.shadow {
  transform: translate(8px, 10px);
  width: 100%;
  height: 0;
}
.hud-border.shadow.bottom {
  height: 1px;
  transform: translate(8px, -7px);
  background-color: rgba(0, 0, 0, 0.03);
}
</style>
